<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>会员升级</title>
		<script type="text/javascript" src="../layui/layui.js"></script>
		<link rel="stylesheet" href="../layui/css/layui.css">
		<link rel="stylesheet" href="../css/backer/MemberUpgrade.css" />
		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
	</head>
	<body>
		<div class="head-div">
			<i class="layui-icon layui-icon-diamond">&nbsp;会员升级</i>
		</div>
		<div class="maintemplate"><br /><br />
			<ul>
				<li ht="830" class="blues">个人VIP会员</li>
				<li ht="950">房产经纪人</li>
				<li ht="950">房产中介</li>
				<div></div>
			</ul>
			<hr class="gray-line" />
			<div class="divnext">
				<br />
				<!--个人VIP会员选项卡-->
				<div href="#" class="indiv" style="display: block;" name="a1">
					<div class="vipchooescard">
						<p>
							<i class="layui-icon layui-icon-tips"></i> 您当前的会员级别：普通会员 长期有效)，目前拥有金币 100
						</p>
					</div>
					<p class="p-message">每天可发布：<span class="boldred">3</span> 条</p>
					<p class="p-message">每天可刷新：<span class="boldred">3</span> 条</p>
					<p class="p-message">总共可发布：<span class="boldred">30</span> 条</p>
					<p class="p-message">升级后可免费查看房源电话</p>
					<!--升级套餐--><br />
					<p class="p-message">选择升级套餐：</p><br />
					<div>
						<div class="SetMeal">
							<div class="SetMeal-div-first">永久</div>
							<span class="SetMeal-span">0.00元/天</span>
							<div class="SetMeal-div-last">
								￥10
							</div>
						</div>
					</div>
					<!--支付方式-->
					<div class="paytype"><br /><br />
						<p>请选择付款方式：</p>
						<span><input type="radio" checked="checked" name="paytype" value="alipay"/>  <span class="zfb">支付宝</span></span>
						<span><input type="radio" name="paytype" value="wx"/>   <span class="wx">微信</span></span>
						<br /><br />
						<p>请选择是否使用积分，当前积分：<span style="font-weight: 700;color: #ff4e00;">0.00</span></p>
						<span><input type="radio" name="usepoint" value="y"/>  <span class="zfb">使用积分</span></span>
						<span><input type="radio" name="usepoint" value="n" checked="checked"/>   <span class="wx">不使用</span></span>
						<br /><br />
						<p>请选择是否使用余额，当前余额：<span style="font-weight: 700;color: #ff4e00;">0.00</span></p>
						<span><input type="radio" name="usebalance" value="y"/>  <span class="zfb">使用余额</span></span>
						<span><input type="radio" name="usebalance" value="n" checked="checked"/>   <span class="wx">不使用</span></span>
					</div><br />
					<div class="needtopay"><br />
						<p>需支付金额:</p><br />
						<p class="balance">￥ 0</p><br />
						<p>
							<input class="upgrade" type="submit" value="确认升级">&nbsp;&nbsp;
							<input class="morepri" type="button" value="查看更多会员特权">
						</p>
					</div>
					
					
				</div>
				<!--房产经纪人选项卡-->
				<div href="#" class="indiv" name="a2">
					<div class="vipchooescard">
						<p>
							<i class="layui-icon layui-icon-tips"></i> 您当前的会员级别：普通会员 长期有效)，目前拥有金币 100
						</p>
					</div>
					<p class="p-message">每天可发布：<span class="boldred">5</span> 条</p>
					<p class="p-message">每天可刷新：<span class="boldred">5</span> 条</p>
					<p class="p-message">总共可发布：<span class="boldred">60</span> 条</p>
					<p class="p-message">可设置精选信息：<span class="boldred">5</span> 条</p>
					<!--升级套餐--><br />
					<p class="p-message">选择升级套餐：</p><br />
					<div>
						<div class="SetMeal" v="1000">
							<div class="SetMeal-div-first">一个月</div>
							<span class="SetMeal-span">10.00元/天</span>
							<div class="SetMeal-div-last">
								￥300.00
							</div>
						</div>
						<div class="SetMeal" v="3000">
							<div class="SetMeal-div-first">一季度</div>
							<span class="SetMeal-span">13.30元/天</span>
							<div class="SetMeal-div-last">
								￥1200.00
							</div>
						</div>
						<div class="SetMeal" v="6000">
							<div class="SetMeal-div-first">半年</div>
							<span class="SetMeal-span">8.20元/天</span>
							<div class="SetMeal-div-last">
								￥1500.00
							</div>
						</div>
						<div class="SetMeal" v="12000">
							<div class="SetMeal-div-first">一年</div>
							<span class="SetMeal-span">6.58元/天</span>
							<div class="SetMeal-div-last">
								￥2400.00
							</div>
						</div>
						<div class="SetMeal" v="24000">
							<div class="SetMeal-div-first">两年</div>
							<span class="SetMeal-span">5.75元/天</span>
							<div class="SetMeal-div-last">
								￥4200.00
							</div>
						</div>
					</div>
					<div class="givetc" style="clear: both;"><br />
						<p>赠送套餐：</p>
						<div class="bonuspoints">
							&nbsp;&nbsp;&nbsp;赠送积分：<span class="integral">0</span>个
						</div>
					</div>
					<!--支付方式-->
					<div class="paytype"><br /><br />
						<p>请选择付款方式：</p>
						<span><input type="radio" checked="checked" name="paytype2" value="alipay"/>  <span class="zfb">支付宝</span></span>
						<span><input type="radio" name="paytype2" value="wx"/>   <span class="wx">微信</span></span>
						<br /><br />
						<p>请选择是否使用积分，当前积分：<span style="font-weight: 700;color: #ff4e00;">0.00</span></p>
						<span><input type="radio" name="usepoint2" value="y"/>  <span class="zfb">使用积分</span></span>
						<span><input type="radio" name="usepoint2" value="n" checked="checked"/>   <span class="wx">不使用</span></span>
						<br /><br />
						<p>请选择是否使用余额，当前余额：<span style="font-weight: 700;color: #ff4e00;">0.00</span></p>
						<span><input type="radio" name="usebalance2" value="y"/>  <span class="zfb">使用余额</span></span>
						<span><input type="radio" name="usebalance2" value="n" checked="checked"/>   <span class="wx">不使用</span></span>
					</div><br />
					<div class="needtopay"><br />
						<p>需支付金额:</p><br />
						<p class="balance">￥ 0</p><br />
						<p>
							<input class="upgrade" type="submit" value="确认升级">&nbsp;&nbsp;
							<input class="morepri" type="button" value="查看更多会员特权">
						</p>
					</div>
					
					
				</div>
				<!--房产中介选项卡-->
				<div href="#" class="indiv" name="a3">
					<div class="vipchooescard">
						<p>
							<i class="layui-icon layui-icon-tips"></i> 您当前的会员级别：普通会员 长期有效)，目前拥有金币 100
						</p>
					</div>
					<p class="p-message">每天可发布：<span class="boldred">20</span> 条</p>
					<p class="p-message">每天可刷新：<span class="boldred">20</span> 条</p>
					<p class="p-message">总共可发布：<span class="boldred">80</span> 条</p>
					<p class="p-message">可设置精选信息：<span class="boldred">20</span> 条</p>
					<!--升级套餐--><br />
					<p class="p-message">选择升级套餐：</p><br />
					<div>
						<div class="SetMeal" v="1500">
							<div class="SetMeal-div-first">一个月</div>
							<span class="SetMeal-span">16.67元/天</span>
							<div class="SetMeal-div-last">
								￥500.00
							</div>
						</div>
						<div class="SetMeal" v="4500">
							<div class="SetMeal-div-first">一季度</div>
							<span class="SetMeal-span">16.30元/天</span>
							<div class="SetMeal-div-last">
								￥1500.00
							</div>
						</div>
						<div class="SetMeal" v="9000">
							<div class="SetMeal-div-first">半年</div>
							<span class="SetMeal-span">10.93元/天</span>
							<div class="SetMeal-div-last">
								￥2000.00
							</div>
						</div>
						<div class="SetMeal" v="17000">
							<div class="SetMeal-div-first">一年</div>
							<span class="SetMeal-span">9.86元/天</span>
							<div class="SetMeal-div-last">
								￥3600.00
							</div>
						</div>
						<div class="SetMeal" v="34000">
							<div class="SetMeal-div-first">两年</div>
							<span class="SetMeal-span">9.32元/天</span>
							<div class="SetMeal-div-last">
								￥6800.00
							</div>
						</div>
					</div>
					<div class="givetc" style="clear: both;"><br />
						<p>赠送套餐：</p>
						<div class="bonuspoints">
							&nbsp;&nbsp;&nbsp;赠送积分：<span class="integral">0</span>个
						</div>
					</div>
					<!--支付方式-->
					<div class="paytype"><br /><br />
						<p>请选择付款方式：</p>
						<span><input type="radio" checked="checked" name="paytype3" value="alipay"/>  <span class="zfb">支付宝</span></span>
						<span><input type="radio" name="paytype3" value="wx"/>   <span class="wx">微信</span></span>
						<br /><br />
						<p>请选择是否使用积分，当前积分：<span style="font-weight: 700;color: #ff4e00;">0.00</span></p>
						<span><input type="radio" name="usepoint3" value="y"/>  <span class="zfb">使用积分</span></span>
						<span><input type="radio" name="usepoint3" checked="checked" value="n" />   <span class="wx">不使用</span></span>
						<br /><br />
						<p>请选择是否使用余额，当前余额：<span style="font-weight: 700;color: #ff4e00;">0.00</span></p>
						<span><input type="radio" name="usebalance3" value="y"/>  <span class="zfb">使用余额</span></span>
						<span><input type="radio" name="usebalance3" checked="checked" value="n" />   <span class="wx">不使用</span></span>
					</div><br />
					<div class="needtopay"><br />
						<p>需支付金额:</p><br />
						<p class="balance">￥ 0</p><br />
						<p>
							<input class="upgrade" type="submit" value="确认升级">&nbsp;&nbsp;
							<input class="morepri" type="button" value="查看更多会员特权">
						</p>
					</div>
					
				</div>
			</div>
			
		</div>
		<br /><br />
	</body>
	<script>
		$(".SetMeal").click(function(){
			$(this).addClass("border-color-blue");
			$(this).siblings().removeClass("border-color-blue");
			$(".integral").text($(this).attr("v"));
		});
		$(".maintemplate ul li").click(function(){
			$(".maintemplate ul div").animate({"left":$(this).index()*100+"px"},300);
			$(this).siblings().removeClass("blues");
			$(".SetMeal").removeClass("border-color-blue");
			$(".maintemplate").css("height",$(this).attr("ht")+"px");
			$(".integral").text("0");
			$(this).addClass("blues");
		});
		$("ul li").click(function(){
			$(".divnext").children("div").hide();
			$(".divnext").children("div").eq($(this).index()).show();
		});
	</script>
</html>
